<template>
  <div class="notes">
    <van-nav-bar title="笔记" fixed />
    <div class="content" ref="content" @scroll="onscroll">
      <div class="hot-topic" v-if="HotTopic.length>0&&dataList.length>0">
        <div class="title">热门话题</div>
        <div class="hot-topic-box">
          <div
            class="hot-topic-item"
            v-for="(item, index) in HotTopic[0]"
            :key="index"
            @click="seeMore(item.id)"
          >
            <img :src="item.icon" alt="" />{{ item.name }}
          </div>
        </div>
        <div class="hot-topic-box">
          <div
            class="hot-topic-item"
            v-for="(item1, index1) in HotTopic[1]"
            :key="index1"
            @click="seeMore(item1.id)"
          >
            <img :src="item1.icon" alt="" />{{ item1.name }}
          </div>
        </div>
      </div>
      <div class="container-water-fall" ref="item" v-if="HotTopic.length>0&&dataList.length>0">
        <waterfall
          :col="col"
          :width="itemWidth"
          :gutterWidth="gutterWidth"
          :data="dataList"
        >
          <template>
            <div
              class="notes-item"
              v-for="(item, index) in dataList"
              :key="index"
              @click="toNoteDetails(item.note.id)"
            >
              <div class="notes-item-img">
                <div class="notes-item-icon" v-if="item.note.images.length > 1">
                  <img :src="atlasIcon" alt="" />
                </div>
                <div class="play-icon" v-if="item.note.video_url">
                <van-icon
                  class="i"
                  name="play-circle-o"
                  size="40"
                  color="#fff"
                />
              </div>
                <img :src="item.note.image_u" alt="" />
              </div>
              <div class="notes-item-title">{{ item.note.title }}</div>
              <div class="author">
                <div class="author-left">
                  <img :src="item.note.author.p" alt="" />
                  <div class="name">{{ item.note.author.n }}</div>
                </div>
              </div>
            </div>
          </template>
        </waterfall>
      </div>
      <div class="loading" v-if="isloading">
        <van-loading size="24px" color="#fbb705">加载中...</van-loading>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Notes",
  data() {
    return {
      offset: 0,
      HotTopic: [],
      dataList: [],
      col: 2,
      isloading: false,
      isPraise: false,
      atlasIcon: require("../assets/atlas.png"),
    };
  },
  created() {
    this.getHotTopic();
    this.getNotes()
  },
  computed: {
    itemWidth() {
      return 375 * 0.5 * (document.documentElement.clientWidth / 375);

      //rem布局 计算列宽度

      //可以根据自己的rem设置修改这里的 334 值
    },

    gutterWidth() {
      return 0 * 0.5 * (document.documentElement.clientWidth / 375);

      //rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)

      //可以根据自己的rem设置修改这里的 36 值
    },
  },

  methods: {
    getHotTopic() {
      this.isloading = true;
      this.axios({
        method: "get",
        url: "home/notes",
        params: {
          offset: this.offset,
          limit: 20,
        },
      }).then((result) => {
        
        this.HotTopic = result.data.result.topics;
        this.isloading = false;
      });
    },
    getNotes(){
      this.isloading = true;
      this.axios({
        method: "get",
        url: "home/notes",
        params: {
          offset: this.offset,
          limit: 20,
        },
      }).then((result) => {
        
        result.data.result.list.forEach((item) => {
          if (item.type == 1) {
            this.dataList.push(item);
          }
        });
        this.offset += 20;
        this.isloading = false;
      });
    },
    seeMore(id) {
      if (id != 0) {
        this.$router.push({name:'Topicdetail',query:{id}})
      }else{
        this.$router.push({ name: "HotTopic" });
      }
    },

    switchCol(col) {
      this.col = col;
    },
    onscroll(e){
      const contentHeight = this.$refs.content.offsetHeight
      const itemHeight = this.$refs.item.offsetHeight
      if(itemHeight - (e.target.scrollTop + contentHeight) < 50 && !this.isloading){
        this.getNotes()
      }
    },
    toNoteDetails(id){
      this.$router.push({name:'NoteDetails',query:{nid:id}})
    },
  },
};
</script>

<style lang="less" scoped>
.notes {
  position: relative;
  /deep/.van-nav-bar__content{
    padding-top: 30px;
    background-color: #fbb705;
  }
  .content {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    bottom: 50px;
    overflow-y: auto;
    // background-color: #fff;
    .hot-topic {
      width: 100%;
      background-color: #fff;
      .title {
        font-size: 20px;
        font-weight: 600;
        padding: 10px 15px;
      }
      .hot-topic-box {
        display: flex;
        flex-wrap: wrap;
        overflow-x: auto;
        .hot-topic-item {
          background-color: #e0f8f1;
          color: #088a85;
          padding: 8px;
          border-radius: 20px;
          margin: 0 5px 5px 5px;
          img {
            width: 10px;
            height: 10px;
          }
        }
      }
    }
    .notes-item {
      background: #ffffff;
      border-radius: 5px;
      margin: 6px;
      .notes-item-img {
        position: relative;
        .notes-item-icon{
          width: 15px;
          height: 15px;
          padding: 5px;
          border-radius: 50%;
          position: absolute;
          top: 10px;
          right: 10px;
          background-color: rgba(0, 0, 0, .3);
          z-index: 9;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .play-icon {
          position: absolute;
          top: calc(50% - 20px);
          left: calc(50% - 20px);
          z-index: 9;
        }
        img {
          border-radius: 5px 5px 0 0;
          width: 100%;

          height: auto;
        }
      }
      .notes-item-title {
        font-size: 13px;
        padding: 0 5px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .author {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        padding: 10px 5px;
        .author-left {
          display: flex;
          align-items: center;
          width: 70%;
          img {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            margin-right: 5px;
          }
          .name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .loading {
      width: 100%;
      margin-top: 10px;
      text-align: center;
    }
  }
}
</style>